<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from "vue";
import socket from "@/util/WebSocket"

const token = ref(null)
const time = ref(2)
const count = ref(0)
const list = ref([])
let timer = null
const boolean = ref(true)
const byts = ref(0)
let source = null

const start = () => {
    boolean.value = false
    source = new EventSource('/api/sse/test');
    const elementById = document.getElementById("div");
    source.onmessage = (event) => {
        count.value++
        // elementById.innerText = message.data
        byts.value = new Blob([event.data]).size / 1024
    }
    timer = setInterval(() => {
        list.value.push(count.value)
        count.value = 0
    },time.value * 1000)
}

const stop = () => {
    boolean.value = true
    clearInterval(timer)
    source.close()
}

const clear = () => {
    list.value = []
}

</script>

<template>
    统计时间(s): <input v-model="time" >
    数据大小(kb): <input v-model="byts" disabled >
    <button @click="start" v-show="boolean">开始</button> <button @click="stop" v-show="!boolean">停止</button> <button @click="clear">清空统计</button>
    <div style="width: 100%;height: 50px;background-color: antiquewhite" id="div"></div>
    <div style="width: 100%;height: 200px;overflow-y: auto;background-color: #747bff" id="div" >
        <div v-for="(item,index) in list" :key="index">
            {{index}}，{{time}} 秒，执行： {{item}} 次，平均每秒 {{item / time}} 次
        </div>
    </div>
</template>

<style scoped>

</style>